<template>
    <el-container>
        <ep-sidebar v-show="tianzheng && !isShow"></ep-sidebar>
        <el-container class="is-vertical" :style="!tianzheng ? 'margin-left: 0;' : isSidebar ? 'margin-left: 256px;' : 'margin-left: 80px;'">
            <ep-header v-show="tianzheng && !isShow"></ep-header>
            <ep-tabs :show="isShow">
                <!--<keep-alive>-->
                    <!--<router-view v-if="this.keepAlive"/>-->
                <!--</keep-alive>-->
                <router-view />
            </ep-tabs>
            <ep-footer></ep-footer>
        </el-container>
    </el-container>
</template>

<script type="es6">
    export default {
        data() {
            return {
                isShow: this.$route.query.show || false,
                keepAlive: true
            }
        },
        computed: {
            isSidebar() {
                return this.$store.getters.isSidebar;
            },
            tianzheng() {
                return !this.$route.query.ticket && !this.$route.query.projid
            }
        },
        watch: {
            isSidebar: {
                handler(value) {
                    return value;
                },
                deep: true
            },
            '$route': {
                handler(value) {
                    this.keepAlive = value.query.keepAlive !== undefined;
                }
            }
        },
        created() {
            window.addEventListener('beforeunload', e => {
                localStorage.setItem('refresh', 'true');
            });
        }
    }
</script>

<style lang="less" scoped>
    .el-main {
        margin: -20px 24px 0;
    }
    .is-vertical {
        height: 100vh;
        overflow-y: auto;
    }
</style>